<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" session="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1>
    <meta name="renderer" content="webkit">
    <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
    <META HTTP-EQUIV="Expires" CONTENT="0">
    <title>便民电话</title>

    <link href="${pageContext.request.contextPath}/static/css/common.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/plugins/bootstrap-3.3.5/css/bootstrap.min.css"
          rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/plugins/font-awesome-4.3.0/css/font-awesome.min.css"
          rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/plugins/select2-4.0.0/dist/css/select2.min.css"
          rel="stylesheet">
    <!-- jqgrid-->
    <link href="${pageContext.request.contextPath}/static/plugins/jqGrid/css/custom.ui.jqgrid.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/plugins/layer/skin/layer.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/plugins/jqGrid/css/style.css" rel="stylesheet">

    <script src="${pageContext.request.contextPath}/static/js/jquery-1.11.3.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/jquery.form.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/common.js"></script>
    <script src="${pageContext.request.contextPath}/static/plugins/bootstrap-3.3.5/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/plugins/jqGrid/js/i18n/grid.locale-cn.js"></script>
    <script src="${pageContext.request.contextPath}/static/plugins/jqGrid/js/minified/jquery.jqGrid.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/plugins/layer/layer.js" type="text/javascript"></script>
	<script src="${pageContext.request.contextPath}/static/js/global.js"></script>
	<script src="${pageContext.request.contextPath}/static/plugins/select2-4.0.0/dist/js/select2.min.js"></script>
	<script type="text/javascript"
            src="${pageContext.request.contextPath}/static/plugins/My97DatePicker/WdatePicker.js"></script>
    <style type="text/css">
	*{
		margin:0;
		padding:0;
	}
        .main h5 a {
            position: absolute;
            right: 20px;
            font-size: 14px;
            bottom: 0px;
            display: inline-block;
            padding: 5px;
        }
		.lt{
			float:left;
		}
        .table_list tbody tr {
            height: 35px;
            text-align: center;
        }
		.col-md-1,.col-md-3{
			*padding-right:0;
			*padding-left:0;
		}
		.form-control{
			*+padding-top:0;
			*+padding-bottom:0;
		}
		.form-group{
			*overflow: hidden;
		}
		
		.btn{
			width:60px\9;
			position:relative;
			top:0px;
			
		}
		.form-group #btn_1{
			position:relative;
			top:0px\9;
			*+top:0px;
			*+left:80px;
			
		}
		.form-group #btn_2{
			position:relative;
			*+top:0px;
			*+left:100px;
			
		}
		.wrapper{
			*+margin-left:260px;
		}
		.left ul li{
			
			*line-height:40px;
			
			*padding-left:20px;
		}
		
		.left ul li a, .left ul li a:hover{
			*color:#fff;
		}
		.list-tab li{
			*+padding:0px 10px 10px;
		}
		.jqGrid_wrapper{
			*+overflow: scroll;
		}
		*{
			*padding:0;
			*margin:0;
		}
		.table>tbody >tr >td{
			padding:0;
		}
		.checkbox{
			width:29px;
		}
		
		.ui-jqgrid tr.ui-row-ltr td {
    		height: 36px;
		}
		.form-control{
			*+width:76%;
		}
		.selectlabe2{
			width:96px !important;
			width:80px !important\9;
			padding-right:0;
		   *+width:84px !important;
		   }
		.selectdivs{
			width: 124px !important;
			width:90px !important\0/;
			}
		#jqgh_jqGrid_cb{
			text-align:center
		}
		#region{
			margin-right:40px\0;
		}
		.right{
           padding-right: 2px\0/;
           padding-left: 20px\0/;
		}
    </style>
</head>
<body view="menu-item-4142">
<jsp:include page="../../top.jsp"></jsp:include>
<div class="right">
 	<div class="wrapper">
        <div class="panel panel-default">
            <div class="panel-heading">
                <span><strong>查询条件</strong></span>

                <div class="ibox-tools">
                    <a class="collapse-link"> <i class="fa fa-chevron-down"></i></a>
                    <a class="collapse-link  d-n"> <i class="fa fa-chevron-up"></i></a>
                </div>
            </div>
            <div class="panel-body">
                <form class="form-horizontal">
			     	<c:if test="${userRole == 1 || userRole == 2 || userRole == 21}">
		                <div class="form-group">
		               		<label class="selectlabe1 col-md-1 form-lable lt">公司名称：</label>
		                    <div class="selectdivs col-md-3 lt">
		                        <select name="agtCode" id="agtCode" class="form-control col-md-1"></select>
		                    </div>
		                    
		                    <label class="selectlabe2 col-md-1 form-lable lt" style="width: 90px;">小区名称：</label>
		                    <div class="selectdivs col-md-3 lt" >
		                        <select name="communityId" id="communityId" class="form-control col-md-1"></select>
		                    </div>
		                    <label class="selectlabe2 col-md-1 form-lable lt" >所属区域：</label>
				            <div id="region" class="col-md-3 lt" style="width:10%;width:8%\9;*+*+width:9%;padding-left: 0px;">
				                <script type="text/javascript">
				                    loadCity();
				                </script>
				            </div>
		         		</div>
         			</c:if> 
         			<c:if test="${userRole == 3 || userRole == 4}">
         				<div class="form-group">
         					<label class="selectlabe2 col-md-1 lt form-lable" style="width: 90px;">小区名称：</label>
		                    <div class="selectdivs col-md-3 lt" >
		                        <select name="communityId" id="communityId" class="form-control col-md-1"></select>
		                    </div>
		                    <label class="selectlabe2 col-md-1 form-lable lt" >所属区域：</label>
				            <div id="region" class="col-md-3 lt" style="width: 10%;width:8%\9;*+width:9%;padding-left: 0px;">
				                <script type="text/javascript">
				                    loadCity();
				                </script>
				            </div>
	                        <label class="selectlabe2 col-md-1 form-lable lt">服务名称：</label>
	                        <div class="selectdivs col-md-3 lt" >
	                            <input id="cName" name="cName" type="text" class="form-control"/>
	                        </div>
	                        
	                        <label class="selectlabe2 col-md-1 lt form-lable">电话：</label>
	                        <div class="selectdivs col-md-3 lt" >
	                            <input id="tel" name="tel" type="text" class="form-control"/>
	                        </div>
	                        <div class="col-md-1 form-action lt" id="btn_1">
	                            <button class="btn btn-success form-control" id="query">查询</button>
	                        </div>
	                        <div class="col-md-1 form-action lt" id="btn_2">
	                            <button class="btn btn-success form-control" id="resetForm">清空</button>
	                        </div>
                    	</div>
         			</c:if>
         			<c:if test="${userRole == 1 || userRole == 2 || userRole == 21 || userRole == 5 || userRole == 6}">
                      <div class="form-group">
                      	<label class="selectlabe1 col-md-1 lt form-lable">服务名称：</label>
                        <div class="selectdivs col-md-3 lt" >
                            <input id="cName" name="cName" type="text" class="form-control"/>
                        </div>
                        
                        <label class="selectlabe2 col-md-1 form-lable lt">电话：</label>
                        <div class="selectdivs col-md-3 lt" >
                            <input id="tel" name="tel" type="text" class="form-control"/>
                        </div>
	                        
                        <div class="col-md-1 form-action lt" id="btn_1">
                            <button class="btn btn-success form-control" id="query">查询</button>
                        </div>
                        <div class="col-md-1 form-action lt" id="btn_2">
                            <button class="btn btn-success form-control" id="resetForm">清空</button>
                        </div>
                    </div>
                 </c:if>
                </form>
            </div>
        </div>
	    <div class="jqGrid_wrapper">
	        <div id="jqGrid_operation" class="jg-grid">
	            <div class="jqGrid_operation" id="action"></div>
	        </div>
	        <table id="jqGrid"></table>
	        <div id="jqGrid_paper"></div>
	    </div>
	</div>
</div>
<script>
    $(document).ready(
            function () {
            	  $.ajax({
                      type: "POST",
                      async: false,
                      url: '/admin/auth_buttons.action',
                      data: "url=" + window.location.pathname,
                      success: function (data) {
                          data = eval("(" + data + ")");
                          for (var i in data) {
                              var action = data[i].mName;
                              switch (action) {
                              	case "便民电话新增":
                                  $("#action").append('<a class="resource_oper default" href="/admin/lifeTel_addView.action"><i class="glyphicon glyphicon-plus"></i>新增</a>');
                                  break;
                              	case "便民电话修改":
                                    $("#action").append('<a class="resource_oper default" id="edit"><i class="glyphicon glyphicon-edit"></i>修改</a>');
                                    $("#edit").click(function () {
                                        var sels = jQuery("#jqGrid").jqGrid('getGridParam', 'selarrrow');
                                        if (sels.length == 1) {
                                        	var sid = sels.toString();
                                        	 window.location.href = "${pageContext.request.contextPath}/admin/lifeTel_editView.action?sid="+sid;
                                        } else {
                                            layer.alert("请选择记录且只能1条记录", {
                                                icon: 6,
                                                closeBtn: false
                                            });
                                        }
                                    });
                                    break;
                              	case "便民电话删除":
                                    $("#action").append("<a id=\"del\"><i class=\"glyphicon glyphicon-trash\"></i>删除</a>");
                                    $("#del").click(function () {
                                        var sels = jQuery("#jqGrid").jqGrid('getGridParam', 'selarrrow');
                                        if (sels == "") {
                                            layer.alert("请选择要删除的记录", {
                                                icon: 6,
                                                closeBtn: false
                                            });
                                        } else {
                                            layer.confirm('确认删除所选择的记录', function (index) {
                                                $.post("${pageContext.request.contextPath}/admin/lifeTel_delete.action", {
                                                    "ids": sels.toString()
                                                }, function (result) {
                                                    result = eval("(" + result + ")");
                                                    layer.alert(result.msg);
                                                    refreshGrid();
                                                });
                                                layer.close(index);
                                            });
                                        }
                                    });
                                    break; 
                              }
                          }
                      }
                  });
            	  $("#communityId").select2({
		                "placeholder": "请选择小区",
		                "minimumResultsForSearch":-1,
		                "width":"110"
		            });
                $.jgrid.defaults.styleUI = "Bootstrap";
                $("#jqGrid").jqGrid(
                        {
                            url: "${pageContext.request.contextPath}/admin/lifeTel_page.action",
                            mtype: 'POST',
                            datatype: "json",
                            height: 350,
                            autowidth: true,
                            shrinkToFit: true,
                            rowNum: 10,
                            rowList: [10, 20, 30],
                            colNames: ['序号', '小区名称', '照片', '服务名称', '地址', '服务说明',
                                '电话 ', '电话', '备注 '],
                            colModel: [{
                                name: "SID",
                                index: "SID",
                                key: true,
                                hidden: true
                            }, {
                                name: 'COMMUNITYNAME',
                                index: 'COMMUNITYNAME',
                                width: 80
                            },{
                                name: 'PIC',
                                index: 'PIC',
                                width: 80,
                                formatter: function (cellvalue, options, rawObject) {
                                	if(cellvalue == '-1'){
                                     	return '';
                                    }else if(cellvalue == null && rawObject.P2 == null){
                                		return "无图标";
                                	}else {
                                		var img ='<img style="width: 35px;" onclick="showpic(\''+cellvalue+'\');" src="'+cellvalue+'" />';
                                		return img;
                                    }
                                }
                            }, {
                                name: "CNAME",
                                index: "CNAME",
                                width: 80
                            }, {
                                name: "ADDR",
                                index: "ADDR",
                                width: 80
                                
                            }, {
                                name: "INTRO",
                                index: "INTRO",
                                width: 80
                            },{
                                name: 'TEL1',
                                index: 'TEL1',
                                width: 80
                            },{
                                name: 'TEL2',
                                index: 'TEL2',
                                width: 80,
                                formatter: function (cellvalue, options, rawObject) {
                                	if(cellvalue == '-1'){
                                     	return '';
                                    }else if(!cellvalue){
                                    	return '/';
                                    }else{
                                    	return cellvalue;
                                   	}
                                }
                            },{
                                name: 'REMARK',
                                index: 'REMARK',
                                width: 80,
                                formatter: function (cellvalue, options, rawObject) {
                                	if(cellvalue == '-1'){
                                     	return '';
                                    }else if(!cellvalue){
                                    	return '/';
                                    }else{
                                    	return cellvalue;
                                   	}
                                }
                            }],
                            sortname: 'priority asc,sid',
                            sortorder:'desc',
                            rownumbers: true,
                            jsonReader: {
                                root: 'rows',
                                page: "page",
                                total: 'total',
                                records: "records",
                                repeatitems: false
                            },
                            pager: "#jqGrid_paper",
                            viewrecords: true,
                            multiselect: true,
                            hidegrid: false,
                            loadComplete: function(){
                        		var re_records = Number($("#jqGrid").getGridParam('records'));
                        		var page = Number($("#jqGrid").getGridParam('page'));
                        		var rows=Number($("#jqGrid").getGridParam('rowNum'));
                        		var num = re_records-(page-1)*rows;
                        		if(num < rows)
                        		{
                        			for(var i=num;i<rows;i++){
                        				$("#jqGrid").jqGrid("addRowData",(i+1),
                                				{ "SID":"", "PIC":"-1", "TEL2":"-1", "REMARK":"-1"}
                        				,"");
                        			}
                        			$(".ui-paging-info").html(re_records-num+1 +" - "+re_records+"　共 "+re_records+" 条");
                        		}
                        	}
                        });
                if('${userRole}' == '1' || '${userRole}' == '2' || '${userRole}' == '21'){
	                $.post("${pageContext.request.contextPath}/admin/tagent_list.action", function (data) {
			            $("#agtCode").empty();
			            $("#agtCode").append("<option value=''>请选择公司</option>");
			            for (var i = 0; i < data.length; i++) {
			                $("#agtCode").append("<option value='" + data[i].agtCode + "'>" + data[i].agtName + "</option>");
			            }
			            $("#agtCode").select2({
			                "placeholder": "请选择公司",
			                "width": "100%"
			            })
			            $("#agtCode").change(function () {
			            	var data = $(this).val();
			            	$.post("${pageContext.request.contextPath}/admin/tcommunity_list.action", {"agtCode": data},function (data) {
					            $("#communityId").empty();
					            $("#communityId").append("<option value=''>请选择社区</option>");
					            for (var i = 0; i < data.length; i++) {
					                $("#communityId").append("<option value='" + data[i].sid + "'>" + data[i].communityName + "</option>");
					            }
					            $("#communityId").select2({
					                "placeholder": "请选择社区",
					                "width": "100%"
					            })
					        }, "json");
			            })
			        }, "json");
                }else if('${userRole}' == '3' || '${userRole}' == '4' ){
                	$.post("${pageContext.request.contextPath}/admin/tcommunity_list.action", 
                        function (data) {
			            $("#communityId").empty();
			            $("#communityId").append("<option value=''>请选择社区</option>");
			            for (var i = 0; i < data.length; i++) {
			                $("#communityId").append("<option value='" + data[i].sid + "'>" + data[i].communityName + "</option>");
			            }
			            $("#communityId").select2({
			                "placeholder": "请选择社区",
			                "width": "100%"
			            })
			        }, "json");
                }
                <!--查询-->
                jQuery("#query").click(query);
                jQuery("#resetForm").click(resetForm);
            });

    <!--刷新jqGrid表格数据-->
    function refreshGrid() {
        $("#jqGrid").trigger("reloadGrid");
    }
    function resetForm() {
        location.reload();
        return false;
    }
    function query() {
        var $agtCode = $("#agtCode").val();
        var $communityId = $("#communityId").val();
        var $areaCode;
		if('${userRole}' != 5 && '${userRole}' != 6){
	        var selects=document.getElementsByName('location');
	        $areaCode = selects[0].value;
		}
        var $pid = $("#pid").val();
        var $cbName = $("#cbName").val();
        var $status = $("#status").val();
        $("#jqGrid").jqGrid('setGridParam', {
            url: "${pageContext.request.contextPath}/admin/lifeTel_page.action",
            postData: {
            	'type':0,
                'agtCode': $agtCode,
                'communityId': $communityId,
                'areaCode': $areaCode,
                'pid': $pid,
                'cbName': $cbName,
                'status': $status
            }, //发送数据
            page: 1
        }).trigger("reloadGrid"); //重新载入*/
        return false;
    }
    //查看大图
    function showpic(content) {
        var html = '<img style="margin-left: -18px;" width="660px" src="' + content + '" alt="便民电话图标"/>';
        layer.open({
            title: '',
            btn: 0,
            area: ['660px', '95%'],
            content: html
        });
    };
	window.onload=function(){
		
		function BrowserType(){
			//获取浏览器的userAgent代理号；
			var userAgent=navigator.userAgent;
			
			//判断是否是Opera浏览器
			var isOpera=userAgent.indexOf("Opera")>-1;
			//判断是否是IE浏览器
			var isIE=userAgent.indexOf("compatible")>-1 && userAgent.indexOf("MSIE")>-1 && !isOpera;
			//判断是否是IE7浏览器
			if(isIE){
				var relIE=new RegExp("MSIE(\\d+\\.\\d+);");
				
				relIE.test(userAgent);
				var arr=userAgent.split(";")
				var flEVersion=arr[1].indexOf("7");
				if(flEVersion>-1){
					
					$tr=$("thead tr th");
					var t=$("tbody tr")[2];
					
					var d=t.getElementsByTagName("td");
					d[0].style.width=10+"px";
					$td=$("tbody tr td");
					var len=$tr.length;
					for(var i=0;i<len;i++){
						$tr[i].style.width=10+"px";
						
						$td[i].style.width=10+"px";
						
					};
				}
			}
		};
		BrowserType();
	};
	
</script>
</body>
</html>
